<template>
 <view class="wrap">
  <u-form :model="user" ref="uForm">
<view class="content">
			<view class="zr">
				<view class="water">
					<view class="water-c">
						<view class="water-1"> </view>
						<view class="water-2"> </view>
					</view>
				</view>
			</view>
		</view>
<u-form-item label-width="140" label-position="left" label="账号"prop="zhanghao">
		 <u-input :border="border" placeholder="请输入账号" v-model="user.account"
		type="text"></u-input>
		 </u-form-item>
 <u-form-item label-width="140" label-position="left" label="用户名"prop="userName"">
 <u-input :border="border" placeholder="请输入用户名" v-model="user.userName"
type="text"></u-input>

 </u-form-item>
 <u-form-item label-width="140" label-position="left" label="密码" prop="password">
 <u-input :password-icon="true" :border="border" type="password" v-model="user.password"
 placeholder="请输入密码"></u-input>
 </u-form-item>
 <u-form-item label-width="140" label-position="left" label="确认密码" prop="rpassword">
 <u-input :password-icon="true" :border="border" type="password" v-model="user.rpassword"
 placeholder="再输一次密码"></u-input>
 </u-form-item>
 <u-form-item label-width="140" label-position="left" label="年龄" prop="age">
  <u-input :border="border" placeholder="请输入年龄" v-model="user.age"
 type="text"></u-input>
  </u-form-item>
  <u-form-item label-width="140" label-position="left" label="电话" prop="phone">
   <u-input :border="border" placeholder="请输入电话" v-model="user.phone"
  type="text"></u-input>
   </u-form-item>
   
   <view v-if="is_fenlei">
			<u-radio-group v-model="value" @change="sexpick">
				<u-radio 
					@change="sexpick" 
					v-for="(item, index) in list3" :key="index" 
					:name="item.val"
					active-color="#101000"
					:disabled="item.disabled"
				>
					{{item.txt}}
				</u-radio>
			</u-radio-group>
			<u-line color="#cecece" /> <!-- 分割线 -->
		</view>
		
	
  <view class="u-demo">
  	<view class="u-demo-wrap">
  
  		<view class="u-demo-area">
  
  			<u-picker
  				:mode="mode"
  				
  				v-model="show"
  				
  				:params="params"
  				end-year="2030"
  				@confirm="confirm"
  				
  				:range="range"
  				:range-key="rangKey"
  				@columnchange="columnchange"
  			></u-picker>
  		</view>
  	</view>
  	<view class="u-config-wrap">
  		
  		<view class="u-config-item">
  			<view class="u-item-title"></view>
  			<button @click="openPicker">{{ input ? input : '选择省份' }}</button>
  		</view>
  		
  		
  		
  		
  	</view>
  </view>

 <u-form-item label-width="140"  label-position="left" label="个性签名" prop="sign">
  <u-input :border="border" placeholder="请输入个性签名" v-model="user.sign"
 type="text" ></u-input>
  </u-form-item>


  </u-form>
  <u-button @click="submit">提交</u-button>
  </view>
 </template>
 <script>
  export default {
  data() {
	
	  
	 
  return {
	  show: false,
	  input: '',
	  rangKey: 'name',
	  mode: 'selector',
	  range: ['河北省', '山西省', '辽宁省', '吉林省', '黑龙江省', '江苏省', '浙江省',
	   '安徽省', '福建省', '江西省', '山东省', '河南省', '广东省', '湖南省', '湖北省', 
	  '海南省', '四川省', '贵州省', '云南省','陕西省', '甘肃省', '青海省', '台湾省', '内蒙古自治区', '广西壮族自治区', '西藏自治区',
	   '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '上海市', '重庆市','澳门特别行政区','香港特别行政区'
	  ],
	  defaultTime: '2019-12-11 20:15:35',
	  defaultSelector: [0],
	  	  
	  params: {
	  	year: true,
	  	month: true,
	  	day: true,
	  	hour: true,
	  	minute: true,
	  	second: true,
	  	province: true,
	  	city: true,
	  	area: true,
	  	timestamp: true
	  },
	   is_fenlei:true,
	  value: '1',
	  list3: [ //分类标签列表
						{
							val:'1',
							txt: '男',
							disabled: false
						},
						{
							val:'2',
							txt: '女',
							disabled: false
						}
					],
  border: true,
  user: { },  
       
  
  }
  },
  methods: {
	  openPicker() {
	  		this.show = true;
	  	},
	  	modeChange(index) {
	  		this.mode = ['selector', 'multiSelector', 'time', 'region'][index];
	  		if (this.mode == 'selector') {
	  			this.range = ['河北省', '山西省', '辽宁省', '吉林省', '黑龙江省', '江苏省', '浙江省',
	   '安徽省', '福建省', '江西省', '山东省', '河南省', '广东省', '湖南省', '湖北省', 
	  '海南省', '四川省', '贵州省', '云南省','陕西省', '甘肃省', '青海省', '台湾省', '内蒙古自治区', '广西壮族自治区', '西藏自治区',
	   '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '上海市', '重庆市','澳门特别行政区','香港特别行政区'
	  		],
	  			this.defaultSelector = [0];
	  		}
	  		
	  		this.show = true;
	  	},
	  
	  confirm(e) {
	    // 处理确认选择后的逻辑
	    console.log(e);
	    this.isPickerOpen = false;
	    this.input = this.range[e[0]];
	    this.user.city=this.range[e[0]];
		console.log(this.range[e[0]])
	  },
	  
	  sexpick(e) {
	  	 console.log(e);
	  	 this.is_fenlei=true;
	  	 this.TypeId=e;
		 if (e==1){
			 this.user.sex=0;
		 }else{
			this. user.sex=1;
		 }
		 console.log(this.user.sex);
	  },
			 
	  	 
     submit() {
  console.log(this.user);
    //检查两次密码是否一致
	if(this.user.password != this.user.rpassword){
		//提交
		this.$u.toast("两次密码输入不同");
		//终止代码
		return
	}
	//到这里说明密码相同
	//发送网络注册请求
	uni.request({
		url:"http://localhost:9090/doRegister",



		data:this.user,
		method:"POST",
		success:(res)=>{
			console.log(res);
 			if(res.data.code*1==200){
				this.$u.toast("注册成功");
				uni.navigateTo({
					url:"/pages/XJX_pages/login"
				})
			}else if(res.data.code*1==2011){ 
			
					this.$u.toast('注册失败,用户名和密码不能为空')
				
			}
			else if(res.data.code*1==2012){
				this.$u.toast('用户名重复，请重新输入')
			}
			else {
				this.$u.toast('注册异常')
			}
		}
	})
  },
   radioChange(e) {
   //console.log(e.detail)
   console.log(e,"radio",this.user.leibie)
   //this.user.leibie = e.detail.value
   },
   radioGroupChange(e){
   console.log(e,"group",this.user.leibie)
   }
   }
   }
   


  </script>
  <style>
	  .input {
	  	border: 1px solid $u-light-color;
	  	border-radius: 4px;
	  	margin-bottom: 20px;
	  	height: 30px;
	  	font-size: 26rpx;
	  	flex: 1;
	  }
	  
	  .input-wrap {
	  	display: flex;
	  }
	  .zr {
	  		color: white;
	  		background: #77eef6;
	  		width: 100%;
	  		height: 60upx;
	  		position: relative;
	  	}
	  
	  	.water {
	  		position: absolute;
	  		left: 0;
	  		bottom: -10upx;
	  		height: 30upx;
	  		width: 100%;
	  		z-index: 1;
	  	}
	  
	  	.water-c {
	  		position: relative;
	  	}
	  
	  	.water-1 {
	  		background: url("") repeat-x;
	  		background-size: 600upx;
	  		animation: wave-animation-1 4.5s infinite linear;
	  	}
	  
	  	.water-2 {
	  		top: 5upx;
	  		background: url("") repeat-x;
	  		background-size: 600upx;
	  		animation: wave-animation-2 8s infinite linear;
	  	}
	  
	  	.water-1,
	  	.water-2 {
	  		position: absolute;
	  		width: 100%;
	  		height: 60upx;
	  	}
	  
	  	.back-white {
	  		background: #fff;
	  	}
	  
	  	@keyframes wave-animation-1 {
	  		0% {
	  			background-position: 0 top;
	  		}
	  
	  		100% {
	  			background-position: 600upx top;
	  		}
	  	}
	  
	  	@keyframes wave-animation-2 {
	  		0% {
	  			background-position: 0 top;
	  		}
	  
	  		100% {
	  			background-position: 600px top;
	  		}
	  	}
	  
  </style>